<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-09 20:41:16
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-07 17:25:50
 -->
<template>
  <div>
    <el-upload
      ref="upload"
      :action="remoteURL"
      :auto-upload="autoUpload"
      :show-file-list="false"
      :on-success="afterAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="myUpload"
      class="avatar-uploader"
      list-type="picture"
    >
      <img v-if="displayImage" :src="displayImage" :class="defaultCss + ' avatar-uploader-image'">
      <i v-else :class="defaultCss + ' el-icon-plus avatar-uploader-icon '" />
    </el-upload>
    <el-button v-if="!autoUpload" type="primary" @click="commitForm">确 定</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'

export default {
  props: {
    autoUpload: {
      type: Boolean,
      default: true
    },
    defaultImage: {
      type: String,
      default: ''
    },
    defaultFileType: {
      type: Array,
      default: () => []
    },
    defaultFileSize: {
      type: Number,
      default: 100
    },
    defaultCss: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      remoteHost: process.env.BASE_API + '/admin/v1/upload/image',
      remoteURL: '',
      uploadImage: ''
    }
  },
  computed: {
    displayImage() {
      return this.defaultImage
    }
  },
  mounted() {
    this.getRemoteURL()
  },
  methods: {
    getRemoteURL() {
      this.remoteURL = this.remoteHost
    },
    afterAvatarSuccess(response, file) {
      this.uploadImage = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log(file.type)
      let existType = true
      if (
        this.defaultFileType.length > 0 &&
        this.defaultFileType.includes(file.type) === false
      ) {
        existType = false
      }
      const sizeLimit = file.size / 1024 / 1024 < this.defaultFileSize

      if (!existType) {
        this.$message.error('上传文件格式错误')
      }
      if (!sizeLimit) {
        this.$message.error('上传文件大小超过限制')
      }
      return existType && sizeLimit
    },
    myUpload(objFile) {
      const file = objFile.file
      const formURL = this.remoteURL
      const form = new FormData()
      form.append('file', file)

      const settings = {
        async: true,
        crossDomain: true,
        url: formURL,
        headers: {
          'Admin-Token': getToken()
        },
        method: 'POST',
        processData: false,
        contentType: false,
        mimeType: 'multipart/form-data',
        data: form
      }
      console.log(settings)

      axios(settings)
        .then(response => {
          console.log(1111)
          console.log(response)
          response = response.data
          // URL的协议使用 https
          response.data.access_url = response.data.url
          response.data.source_url = response.data.url
          response.data.url = response.data.url
          this.uploadImage = response.data.url
          this.$emit('upload', response.data)
          // this.$message.success('文件上传成功')
        })
        .catch(error => {
          console.log(error)
          this.$message.error('文件上传失败，请重新上传')
        })
    },
    commitForm() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  margin-bottom: 10px;
}

.avatar-uploader-icon {
  border: 1px double #8c939d;
  border-radius: 10px;
  color: #8c939d;
  font-size: 28px;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader-icon:hover {
  border: 1.5px dashed #20a0ff;
  color: #20a0ff;
}

.avatar-uploader-image {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
